<!--  -->
<template>
    <div class='audit'>
        <el-form ref="form" :model="form" label-width="80px" size="mini" style="display:flex;">
            <el-form-item label="审核状态">
                <el-select v-model="form.state" placeholder="请选择">
                    <el-option label="审核" value=true></el-option>
                    <el-option label="未审核" value="false"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button size="mini" type="primary" @click="DDquery">查询</el-button>
                <el-button size="mini" type="primary" @click="DDadd">添加</el-button>
            </el-form-item>
        </el-form>
        <!-- 表格 -->
        <el-table size="mini" style="width: 95%; margin: 15px" :header-cell-style="{
        color: '#fff',
        background: '#6090EC',
        fontSize: '11px',
        fontWeight: 'normal',
      }" id="tableTop" :data="travelSupplierVoList" border stripe>
            <el-table-column label="会员编号" prop="customerId" width="100"></el-table-column>
            <el-table-column label="会员姓名" prop="customerName" width="100"></el-table-column>
            <el-table-column label="手机号" prop="customerPhone" width="100"></el-table-column>
            <el-table-column label="VIP经理编号" prop="employeeId" width="100"></el-table-column>
            <el-table-column label="VIP经理名称" prop="employeeName" width="100"></el-table-column>
            <el-table-column label="凭证">
                <template slot-scope="scope">
                    <div class="demo-image__preview">
                        <el-image style="width: 100px; height: 100px" :src="scope.row.auditPhoto"
                            :preview-src-list="scope.row.auditPhotoUrl">
                        </el-image>
                    </div>
                    <!-- <img @click="auditPhotoUrl" style="width:100px;height:100px;" :src="scope.row.auditPhoto" /> -->
                </template>

            </el-table-column>
            <el-table-column label="审核状态" prop="state" width="100">
                <template slot-scope="scope">
                    <template v-if="scope.row.state == '1'">未审核</template>
                    <template v-if="scope.row.state == '2'">审核成功</template>
                    <template v-if="scope.row.state == '3'">审核失败</template>
                </template>
            </el-table-column>
            <el-table-column label="提交时间" prop="createTime" width="80"></el-table-column>
            <el-table-column label="审核时间" prop="" width="80"></el-table-column>
            <!-- <el-table-column label="目的地" prop="createTime"></el-table-column>
            <el-table-column label="到达地" prop="createTime"></el-table-column> -->
            <el-table-column label="操作" width="140px">
                <template slot-scope="scope">
                    <!-- <el-button style="background-color: #6090ec; color: #fff" size="mini"
                        @click="editDialog(scope.row)">查看凭证
                    </el-button> -->
                    <!-- <el-popconfirm title="确定审核吗?" @confirm="getDDedit" > -->
                    <el-button v-if="(scope.row.state=='1' )|| (scope.row.state=='3')" size="mini" style="background-color: #ff0000;
                      color: #fff;margin:0 0 0 10px" slot="reference;" @click="getDDedit(scope.row)">审核成功 </el-button>
                    <!-- </el-popconfirm> -->
                    <!-- <el-popconfirm title="确定审核吗?" @confirm="getDDeditas" > -->
                    <!-- <el-button v-if="(scope.row.state=='1') || (scope.row.state=='2')" size="mini" style="background-color: #ff0000;
                      color: #fff;margin:0 0 0 10px" slot="reference;" @click="getDDeditas(scope.row)">审核失败</el-button> -->
                    <!-- </el-popconfirm> -->
                    <!-- <el-button v-if="scope.row.state == 'false'" @click="auditSupplier(scope.row)"
                        style="background-color: #ff0000; color: #fff" size="mini">审核
                    </el-button> -->
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
            :page-sizes="[10, 15, 20]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper"
            :total="pageTotal">
        </el-pagination>
        <!-- 添加按钮 -->
        <el-dialog title="上传凭证" :visible.sync="dialogVisible" width="30%" :close-on-click-modal="false">
            <el-form ref="form" :model="formadd" label-width="100px" size="mini">
                <el-form-item label="会员手机号">
                    <el-input v-model="formadd.phone" style="width:140px"></el-input>
                </el-form-item>
                <el-form-item label="凭证图片">
                    <el-upload ref="upload" :limit="9" action="/file/fileMapping/uploadAvatarAirport"
                        list-type="picture-card" :on-success="handleAvatarSuccess"
                        :on-preview="handlePictureCardPreview" :on-remove="handleRemove">
                        <i class="el-icon-plus"></i>
                    </el-upload>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取消</el-button>
                <el-button type="primary" @click="DDsubmit">提交</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
    export default {
        name: 'audit',
        data() {
            //这里存放数据
            return {
                state: "",
                couponAuditId: null,
                // 凭证图片
                response: [],
                // 添加表单
                formadd: {
                    phone: "",
                },
                dialogVisible: false,
                form: {
                    state: "",
                },
                travelSupplierVoList: [],
                //分页
                pageSize: 10,
                currentPage: 1,
                pageTotal: 0,
            }
        },
        components: {},
        //方法集合
        methods: {
            // 审核按钮
            auditSupplier(row) {
                console.log(row)
                this.couponAuditId = row.couponAuditId
            },
            getDDeditas(row) {
                this.$axios.getDDedit({
                    couponAuditId: row.couponAuditId,
                    state: '3'
                }).then((res) => {
                    console.log(res)
                    if (res.code == 200) {
                        this.getDDlist()
                        this.$message({
                            message: '操作成功',
                            type: 'success'
                        });
                    }
                })
            },
            // 审核接口
            getDDedit(row) {
                this.$axios.getDDedit({
                    couponAuditId: row.couponAuditId,
                    state: '2'
                }).then((res) => {
                    console.log(res)
                    if (res.code == 200) {
                        this.getDDlist()
                        this.$message({
                            message: '操作成功',
                            type: 'success'
                        });
                    }
                })
            },
            // 添加提交按钮
            DDsubmit() {
                if (this.formadd.phone == '') {
                    this.$message({
                        message: '请输入会员手机号',
                        type: 'warning'
                    });
                } else if (this.response.length == 0) {
                    this.$message({
                        message: '请上传凭证图片',
                        type: 'warning'
                    });
                } else {
                    this.getDDadd()
                }
            },
            // 查询按钮
            DDquery() {
                localStorage.setItem("pageSize", 10);
                localStorage.setItem("pageNum", 1);
                this.getDDlist()
            },
            // 添加接口
            getDDadd() {
                localStorage.setItem("isToken", true);
                this.$axios.getDDadd({
                    auditPhotoUrl: this.response,
                    customerPhone: this.formadd.phone
                }).then((res) => {
                    
                    console.log(res)
                    if (res.code == 200) {
                        this.$message({
                            message: '添加成功',
                            type: 'success'
                        });
                        this.dialogVisible = false
                        this.getDDlist()
                    }
                })
            },
            // 列表接口
            getDDlist() {
                localStorage.setItem("isToken", true);
                this.$axios.getDDlist(this.form).then((res) => {
                    
                    if (res.code == 200) {
                        this.travelSupplierVoList = res.data
                        this.pageTotal = res.total
                    }
                })
            },
            // 添加按钮
            DDadd() {
                this.formadd.phone = ''
                this.response = []
                this.dialogVisible = true
            },
            // 查看凭证按钮
            editDialog(row) {},
            // 图片返回数据
            handleAvatarSuccess(response) {
                //
                console.log(response)
                this.response.push(response[0])
                // if (this.airportadd.picturename == '') {
                //   console.log(response)
                //   this.airportadd.picturename = response[0]
                // }

            },
            handleRemove(file, fileList) {
                console.log(file, fileList);
            },
            handlePictureCardPreview(file) {
                console.log(file)
                this.dialogImageUrl = file.url;
                this.dialogVisible = true;
            },
            //分页
            handleSizeChange(value) {
                console.log("1", value);
                localStorage.setItem("pageSize", value);
                localStorage.setItem("pageNum", 1);
                this.getDDlist();
                this.pageSize = value;
            },
            handleCurrentChange(value) {
                console.log("2", value);

                localStorage.setItem("pageNum", value);
                localStorage.setItem("pageSize", this.pageSize);
                this.getDDlist();
                // orders = res.data;
            },
        },
        created() {
            this.getDDlist()
        },
        mounted() {

        }
    }
</script>
<style scoped>
    .audit {
        margin: 20px;
    }
</style>